import React, { useEffect, useState } from 'react';
import { getProList } from '../../api/pro'
import { Button, Table } from 'antd';

import ExportJsonExcel from 'js-export-excel'


const Export = () => {

  const [proList,setProList] = useState()

  useEffect(()=>{
    getProList().then(res => {
      setProList(res.data)
    })
  })

  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span> {i + 1} </span>
      },
      width: 100
    },{
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]

  function excel(){
    const option = {
      fileName: 'proList', // 导出的文件名
      datas: [
        {
          sheetData: proList, // 要导出的原数据
          sheetName: "你好世界", // 导出后工作表的名称
          sheetFilter: ["brand", "category", "proname"],
          sheetHeader: ["品牌", "分类", "商品名称"],
          columnWidths: [], // 导出后单元格的宽度
        }
      ]
    }
    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  }

  return (
    <div>
      <Button onClick={()=>{excel()}}>文件导出</Button>

      <Table
      dataSource={proList}
      rowKey={'proid'}
      scroll={{y: 420}}
      columns={columns} />
    </div>
  );
};

export default Export;
